<template>
  <div class="forgotDom">
    <div class="forgot-big"></div>
    <div class="forgot-form">
      <h1 class="forgot-title">欢迎注册</h1>
      <el-form ref="forgotForm" :model="sizeForm" size="mini" :rules="forgotRules">
        <el-form-item prop="phone">
          <el-tooltip class="item" effect="dark" content="请输入手机号码" placement="right-end" popper-class="popperClass">
            <el-input v-model.trim="sizeForm.phone" placeholder="请输入手机号码"></el-input>
          </el-tooltip>
        </el-form-item>
        <el-form-item prop="Verification" class="parent">
          <el-tooltip class="item" effect="dark" content="请输入验证码" placement="right-end" popper-class="popperClass">
            <!-- style="width: 50%;" -->
            <el-input v-model.trim="sizeForm.Verification" placeholder="请输入验证码" />
          </el-tooltip>
          <el-button class="verify-btn" type="primary" @click="validationText">{{ validation }}</el-button>
        </el-form-item>
        <!-- <el-form-item prop="username">
          <el-tooltip class="item" effect="dark" placement="right-end" popper-class="popperClass">
            <div slot="content">长度为6-32个字符<br />不能为纯数字<br />用户名不可更改<br />仅支持大小写字母、数字和下划线</div>
            <el-input v-model.trim="sizeForm.username" placeholder="请设置您的用户名"></el-input>
          </el-tooltip>
        </el-form-item> -->
        <el-form-item prop="password">
          <el-tooltip class="item" effect="dark" placement="right-end" popper-class="popperClass">
            <div slot="content">长度为6-20个字符</div>
            <!-- <br />至少包含大小写字母、数字及特殊字符中的两种<br />不能与用户名相同 -->
            <el-input v-model.trim="sizeForm.password" placeholder="请输入您的密码" type="password" show-password></el-input>
          </el-tooltip>
        </el-form-item>
        <el-form-item prop="passwordAgain">
          <el-tooltip class="item" effect="dark" content="请再次输入您的密码" placement="right-end" popper-class="popperClass">
            <el-input v-model.trim="sizeForm.passwordAgain" placeholder="请再次输入您的密码" type="password"
              show-password></el-input>
          </el-tooltip>
        </el-form-item>
        <el-form-item prop="ischecked">
          <div class="flexCheck">
            <el-checkbox v-model.trim="sizeForm.ischecked">
            </el-checkbox>
            <span style="padding: 0 2px 0 5px;">我已阅读并同意</span>
            <a class="agreement" @click="dialogVisible = true">《用户协议》</a>
          </div>
        </el-form-item>
        <el-button type="primary" class="primary" @click="clickforgot">注册</el-button>
        <div class="clues">
          <span>已有账号？</span>
          <span @click="$emit('showForgot', 'login')">去登陆</span>
        </div>
      </el-form>
    </div>
    <el-dialog title="图图云平台_服务协议" :visible.sync="dialogVisible" :width="dialogWidth" v-dialogDrag>
      <div class="agreementReading">
        <p>
          欢迎使用图图云平台！
          本协议系由武汉百奥维凡生物科技有限公司图图云平台（以下简称cloudtutu）与使用cloudtutu服务的主体（包括但不限于个人、团队等，以下简称“用户”或“您”）对cloudtutu平台的使用及相关服务所订立的有效合约。
        </p>
        <p>
          请您在注册时务必仔细阅读并理解各项条款内容。cloudtutu有权在必要时候修改服务相关条款，如果用户不同意所改动的内容，可以主动取消获得的平台服务。如果用户继续享用平台服务，则视为接受本平台相关服务条款。cloudtutu保留随时修改或中断服务而不需要通知用户的权利。如果您对本协议的条款有疑问的，请通过图图相关微信号进行询问，图图将向您解释条款内容。本协议适用于任何图图cloudtutu服务。
        </p>

        <h2>
          一、用户使用权责
        </h2>
        <div>
          1. 用户注册
        </div>
        <p>
          在使用cloudtutu服务前，用户应填写真实有效的联系信息：联系方式、电子邮件地址，并设置密码等。您提供给cloudtutu的所有信息将受到cloudtutu的隐私条款的保护，您有责任在帐户个人信息设置页面中更新您的注册信息。
        </p>
        <div>
          2. 账号使用
        </div>
        <p>
          云帐号使用权仅供本人使用。注册用户不得转让，转借，出租，出售，分享或以其它方式转让账号与密码给任何第三方使用。
        </p>
        <div>
          3. 用户使用
        </div>
        <p>
          若用户使用cloudtutu云服务的行为不符合本协议相关规定，cloudtutu在经由通知、举报等途径发现时有权做出独立判断，且有权在无需事先通知用户的情况下立即终止向用户提供部分或全部服务。
        </p>
        <p>
          用户若通过cloudtutu云服务散布和传播反动、色情或其他违反国家法律、法规的信息，cloudtutu云服务的系统记录将可能作为用户违反法律法规的证据；因用户进行上述内容在cloudtutu云服务的上载、传播而导致任何第三方提出索赔要求或衍生的任何损害或损失，由用户自行承担全部责任。
        </p>

        <h2>
          二、服务内容
        </h2>
        <div>
          1. cloudtutu服务
        </div>
        <p>
          cloudtutu云平台是一个通过技术服务向广大用户提供数据管理和分析的在线服务平台，服务本身对用户传输内容不做任何修改或编辑。
        </p>
        <div>
          2. 用户理解
        </div>
        <p>
          cloudtutu可能会限制某些或所有用户在某段时间内访问或使用我们的部分服务，由于网站维护或计算机设备或其他原因，本网站和/或服务可能在某段时间内无法使用。
        </p>
        <p>
          cloudtutu服务仅提供相关的网络服务，除此之外与相关网络服务有关的设备（如个人电脑、手机、及其他与接入互联网或移动网有关的装置）及所需的费用（如为接入互联网而支付的电话费及上网费、为使用移动网而支付的手机费）均应由用户自行负担。/或服务可能在某段时间内无法使用。
        </p>

        <h2>
          三、所有权
        </h2>
        <p>
          cloudtutu保留对以下各项内容、信息完全的、不可分割的所有权及知识产权
        </p>
        <div>
          1. 平台所有权
        </div>
        <p>
          除用户自行上传、传播的内容外，cloudtutu云服务及其所有元素，包括但不限于所有内容、数据、技术、软件、代码、用户界面以及与其相关的任何衍生作品，用户信息。
          未经cloudtutu云同意，上述资料均不得在任何媒体直接或间接发布、播放、出于播放或发布目的而改写或再发行，或者被用于其他任何商业目的。对于由上述资料产生或在传送或递交全部或部分上述资料过程中产生的延误、不准确、错误和遗漏或从中产生或由此产生的任何损害赔偿，cloudtutu不以任何形式向用户或任何第三方负法律、经济责任；
        </p>
        <div>
          2. 软件所有权
        </div>
        <p>
          cloudtutu云服务为提供分析服务而使用的任何软件（包括但不限于软件中所含的任何图像、照片、动画、录像、录音、音乐、文字和附加程序、随附的帮助材料）的一切权利均属于该软件的著作权人，未经该软件的著作权人许可，用户不得对该软件进行反向工程（reverse
          engineer）、反向编译（decompile）或反汇编（disassemble），或以其他方式发现其原始编码，以及实施任何涉嫌侵害著作权的行为。
        </p>
        <div>
          3. 商标
        </div>
        <p>
          服务标志及商标cloudtutu，任何其他商标、服务标志、标识或出现在服务中的第三方商业名称均为其用户所有的财产，非经所有者的书面同意，用户不得复制或使用这些商标、标志或商品名称。
        </p>

        <h2>
          四、数据权责
        </h2>
        <div>
          1. 提交数据
        </div>
        <p>
          用户可以在任何时候根据本服务条款提交数据给cloudtutu，但必须保证上述数据符合适用的法律法规，并遵守适用的法律法规。成功提交的数据需要进行处理，您授予cloudtutu非独家的汇总和提交数据权利。
        </p>
        <div>
          2. 数据内容
        </div>
        <p>
          用户不得滥用cloudtutu的服务，任何经由本服务以上传、张贴、发送即时信息、电子邮件或任何其他方式传送的资讯、资料、
          文字、软件、音乐、音讯、照片、图形、视讯、信息、用户的登记资料或其他资料（以下简称“内容”），无论系公开还是私下传送，均由内容提供者、使用者对其上传、使用行为自行承担责任。cloudtutu作为数据管理和分析的服务平台，无法控制经由本服务传送之内容，也无法对用户的使用行为进行全面控制，因此不能保证内容的合法性、正确性、完整性、真实性或品质；您已预知并同意将自行加以判断并承担所有风险，而不依赖于cloudtutu服务。
        </p>
        <div>
          3. 数据监控
        </div>
        <p>
          cloudtutu有权对用户使用cloudtutu网络服务的情况进行监督，如经由通知、举报等途径发现用户在使用cloudtutu服务所提供的网络服务时违反任何本协议的规定，cloudtutu有权要求用户改正或直接采取一切cloudtutu认为必要的措施（包括但不限于更改或删除用户上载的内容、暂停或终止用户使用网络服务的权利）以减轻用户不当行为造成的影响。
        </p>

        <h2>
          五、承诺与保证
        </h2>
        <p>
          用户保证，其在cloudtutu服务上传的内容不得并禁止直接或间接的：
        </p>
        <div>
          1.
          利用cloudtutu云服务提供的网络服务上传、发布、传送或通过其他方式传播含有任何违反国家法律法规政策的信息、有害、威胁、辱骂、骚扰、诽谤、粗俗、攻击性、淫秽、色情、猥亵的内容，或其他cloudtutu认为的不良信息；
        </div>
        <div>
          2. 以任何方式干扰或企图干扰cloudtutu服务或cloudtutu网站任何部分或功能的正常运行
        </div>
        <div>
          3. 提交您明知是虚假、误导、不实，或不准确的用户内容；
        </div>
        <div>
          4. 未经允许，进入计算机信息网络或者使用计算机信息网络资源的、对计算机信息网络功能进行删除、修改或者增加、存储、处理或者传输的数据和应用程序进行删除、修改或者增加的、故意破坏程序、危害计算机信息网络安全的行为；
        </div>
        <div>
          5. 发表侵犯他人的著作权、商标或商品秘密的内容；
        </div>
        <div>
          6. 未事先经过原始用户的同意向任何非原始用户显示或以其他方式提供任何用户信息;
        </div>
        <div>
          7. 未经授权冒充他人或获取对cloudtutu服务的访问权；或者未经用户明确同意，让任何其他人亲自识别该用户；
        </div>
        <div>
          9.
          宣传、教唆或参与任何多层次传销或传销、对通过服务获取的论坛发布恶意骚扰信息。用户违反上述任何一款的保证，cloudtutu均有权就其情节，对其做出警告、屏蔽、直至取消资格的处罚；如因用户违反上述保证而给cloudtutu服务、cloudtutu服务用户或cloudtutu的任何合作伙伴造成损失，用户自行负责承担一切法律责任并赔偿损失。
        </div>

        <h2>
          六、知识产权保护
        </h2>
        <p>
          如果用户上传的内容允许其他用户下载、查看、收听或以其他方式访问或分发，其必须保证该内容的发布和相关行为实施符合相关知识产权法律法规中相关的版权政策，包括但不限于：
        </p>
        <div>
          1. 用户在收到侵权通知之时，应立即删除或禁止访问声明的侵权内容，并同时联系递送通知的人员以了解详细信息。
        </div>
        <div>
          2. 用户知悉并同意cloudtutu将根据相关法律法规对第三方发出的合格的侵权通知进行处理，并按照要求删除或禁止访问声明的侵权内容，采用并实施适当的政策，以期杜绝在相应条件下重复侵权。
        </div>


        <h2>
          七、隐私保护
        </h2>
        <p>
          cloudtutu充分尊重用户个人信息的保护，您在注册时向cloudtutu提供的所有信息将受cloudtutu隐私条款保护。cloudtutu不会公开或向第三方提供用户存储在cloudtutu云服务上的非公开内容，除非有下列情况：
        </p>
        <div>
          1. 为维护cloudtutu的商标权、专利权及其他任何合法权益；
        </div>
        <div>
          2. 有关法律、法规规定或cloudtutu云服务合法服务程序规定；
        </div>
        <div>
          3. 其他依法需要公开、编辑或透露个人信息的情况。
        </div>

        <h2>
          八、免责声明
        </h2>
        <p>
          鉴于网络服务的特殊性，您理解在使用cloudtutu服务过程中，可能会遇到不可抗力等风险因素，使本服务发生中断。如变更、中断或终止的网络服务属于免费网络服务，cloudtutu无需通知用户。出现上述情况时，cloudtutu将在第一时间内及时采取修复等措施，但由此造成的损失我们将在法律允许的范围内无需对任何用户或任何第三方承担任何责任。
        </p>
        <p>
          在法律允许的范围内，cloudtutu对以下情形导致的服务中断或受阻不承担责任，包括但不限于：
        </p>
        <div>
          1. 在cloudtutu开放测试期间可能会存在程序错误，如因此类情况造成用户数据丢失，cloudtutu服务无需为此承担任何责任。在开放测试期间，用户应自行将上传的数据进行妥善备份；
        </div>
        <div>
          2. cloudtutu服务可在任何时候为任何原因变更本服务或删除其部分功能、可在任何时候取消或终止对用户的服务、并且取消或终止服务的决定不需要理由或通知用户，一旦服务取消，用户使用本服务的权利立即终止，
          用户在本服务中储存的任何信息可能无法恢复；
        </div>
        <div>
          3.
          cloudtutu服务需要定期或不定期地对提供网络服务的平台或相关的设备进行检修或者维护，如因此类情况而造成收费网络服务在合理时间内的中断，cloudtutu服务无需为此承担任何责任，但cloudtutu服务应尽可能事先进行通告；
        </div>
        <div>
          4. 用户的电脑软件、系统、硬件和通信线路出现故障；
        </div>
        <div>
          5. 受到计算机病毒、木马或其他恶意程序、黑客攻击的破坏；
        </div>
        <div>
          6. 用户操作不当，或者用户通过非cloudtutu授权的方式使用本服务；
        </div>
        <div>
          7. 其他cloudtutu无法控制或合理预见的情形。
        </div>
        <p>您理解并同意，在使用本服务的过程中，可能会遇到网络信息或其他用户行为带来的风险，cloudtutu不对任何信息的真实性、适用性、合法性承担责任，也不对因侵权行为给您造成的损害负责。这些风险包括但不限于：</p>
        <div>1. 来自他人匿名或冒名的含有威胁、诽谤、令人反感或非法内容的信息；</div>
        <div>2. 因使用本服务，遭受他人误导、欺骗或其他导致或可能导致的任何心理、生理上的伤害以及经济上的损失；</div>
        <div>3. 由于用户授权第三方（包括第三方应用）访问/使用其cloudtutu服务空间的内容所导致的纠纷或损失，应由用户自行负责，与cloudtutu无关；</div>
        <div>4. 其他因网络信息或用户行为引起的风险。</div>
        <p>cloudtutu有权处理违法违规内容，但该权利不构成cloudtutu的义务或承诺，cloudtutu不保证及时发现违法行为或进行相应处理。</p>

        <h1>
          九、其他
        </h1>
        <div>1. 本协议最终解释权归cloudtutu所有。</div>
        <div>2.
          本协议一经公布即生效，cloudtutu有权随时对协议内容进行修改，修改后的结果公布于cloudtutu服务网站上。如果不同意cloudtutu服务对本协议相关条款所做的修改，用户有权停止使用网络服务。如果用户继续使用网络服务，则视为用户接受cloudtutu对本协议相关条款所做的修改。
        </div>
        <div>3. cloudtutu服务对于用户所有的通知均可通过网页公告、电子邮件、手机短信或常规的信件传送等方式进行；该等通知于发送之日视为已送达收件人。</div>
        <div>4. 本协议的订立、执行和解释及争议的解决均应适用中国法律并受中国法院管辖。如双方就本协议内容或其执行发生任何争议，双方应尽量友好协商解决；协商不成时，任何一方均可向cloudtutu所在地的人民法院提起诉讼。
        </div>
        <div>5. 本协议构成双方对本协议之约定事项及其他有关事宜的完整协议，除本协议规定的之外，未赋予本协议各方其他权利。</div>
        <div>6. 如本协议中的任何条款无论因何种原因完全或部分无效或不具有执行力，本协议的其余条款仍应有效并且有约束力。</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import register from '@/utils/login/register'
import { checkVerificationRequest, submitRegisterRequest } from '@/api/login'
export default {
  name: 'BaiaoweifanUiforgot',
  mixins: [register],
  data() {
    return {
      //注册
      sizeForm: {
        phone: '',
        Verification: '',
        // username: '',
        password: '',
        passwordAgain: '',
        ischecked: false
      },
      timer: null,
      dialogVisible: false,
      validation: '发送验证码',
      countdown: 60,
      dialogWidth: '600px'
    };
  },

  mounted() {
    this.$resizeDialog(500, this.dialogWidth)
  },
  beforeDestroy() {
    this.$unResizeDialog()
  },
  methods: {
    //注册
    clickforgot() {
      this.$refs['forgotForm'].validate(async valid => {
        if (valid) {
          try {
            const result = await submitRegisterRequest({
              mobilePhone: this.sizeForm.phone,
              password: this.sizeForm.password,
              // userName:this.sizeForm.username,
              validCode: this.sizeForm.Verification
            })
            if (result.code !== 200) return this.$message({
              message: result.message,
              type: 'warning'
            });
            this.$message({
              message: '注册成功！',
              type: 'success'
            });

            this.$confirm('是否一键登录？', '注册成功！', {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
              type: 'warning',
              beforeClose: (action, instance, done) => {
                if (action === 'confirm') {
                  // console.log('直接登录');
                  this.$store.dispatch('login/passwordLogin', {
                    loginAccount: this.sizeForm.phone,
                    loginPassword: this.sizeForm.password,
                  })
                } else if (action === 'cancel') {
                  // console.log('11');
                  this.$emit('showForgot', 'login');
                }
                done();
              }
            })
          } catch (error) {
            this.$message.error('系统错误，请联系管理员！')
          }
        }
      })
    },
    keyToLogin() { },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
$bg: #fff;

.forgotDom {
  // position: relative;
  width: 100%;
  height: 100%;

  .forgot-big {
    width: 100%;
    height: 100%;
    // background: url(../../../assets/bg.png) no-repeat 50%;
  }

  .forgot-form {
    position: absolute;
    top: 10%;
    right: 35%;
    width: 600px;
    height: 700px;
    background-color: $bg;
    border-radius: 5px;
    padding: 50px 120px 25px;

    .forgot-title {
      // color: $themeTopToolColor;
      // text-align: center;
      padding: 12px 0;
      font-weight: 400;
    }

    .flexCheck {
      display: flex;
    }

    .agreement {
      color: $themeTopToolColor;
      // margin-left: 2px;
      font-size: 10px;
    }

    .parent {
      position: relative;

      .verify-btn {
        background-color: transparent;
        position: absolute;
        top: 0;
        right: 0;
        border: 0;
        color: $themeTopToolColor;
        float: right;
        font-weight: 700;
        height: 38px;
        border-radius: 5px;
        width: 125px;
      }
    }


    .primary {
      background: linear-gradient(90deg, $themeTopToolColor, $themeTopToolColor);
      border: 0;
      width: 60%;
      height: 48px;
      border-radius: 24px;
      position: absolute;
      top: 420px;
      left: 50%;
      transform: translateX(-50%);

      &:hover {
        background: linear-gradient(90deg, $themeTopToolColor, $themeTopToolColor);
      }
    }

    ::v-deep .el-input--mini {
      .el-input__inner {
        height: 38px;
        line-height: 38px;
        border-radius: 5px;

        &::placeholder {
          color: #666;
        }
      }
    }
  }

  .clues {
    // width: 350px;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    // color: #ccc;
    font-size: 13px;
    position: absolute;
    top: 490px;

    span {
      &:last-child {
        color: $themeTopToolColor;
        cursor: pointer;
      }
    }

    // text-align: center;

    // div {
    //   width: 46px;
    //   height: 1px;
    //   background-color: #ccc;
    // }
  }

  .agreementReading {
    width: 100%;
    height: 600px;
    overflow-y: auto;

    p {
      text-indent: 2em;
    }
    div{
      margin: 14px 0;
    }
  }
}

::v-deep .el-dialog__body {
  padding: 0 20px 20px;
}
</style>

<style>
/* 确认窗 取消确认按钮位置更换 */
.el-message-box__wrapper .el-message-box__btns {
  display: flex;
  flex-flow: row-reverse;
}

.el-message-box__wrapper .el-message-box__btns .el-button {
  margin-left: 10px;
}</style>
